<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - input example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      // create a sprite
      var poly = new crayon.CustomShape({
        color: '#f00',
        x: 200,
        y: 200,
        stroke: 1,
        input: true,
        rotation: Math.PI * 1.6
      });

      poly.moveTo(-150, 0);
      poly.lineTo(-80, -120);
      poly.lineTo(-20, -20);
      poly.lineTo(80, -120);
      poly.lineTo(150, 40);
      poly.lineTo(0, 150);
      poly.close();

      poly.on('mousedown touchstart', function(){
        this.set({color: '#400'});
      });

      poly.on('mouseup mouseleave touchend', function(){
        this.set({color: '#f00'});
      });

      var logo = new crayon.Sprite({
        src: 'img/html5.png',
        x: 128,
        y: 128,
        rotation: Math.PI / 4,
        scaleX: 1.3,
        scaleY: 1.3,
        input: true
      });

      logo.on('mousedown touchstart', function(){
        this.filter('colorOverlay', new crayon.Color(0, 0, 0, 0.5));
      });

      logo.on('mouseup mouseleave touchend', function(){
        this.removeFilter();
      });


      // add items to the canvas
      canvas.add(poly, logo);

    </script>
  </body>
</html>